<template>
  <div class="container">
    <div
      class="blog-header"
      :style="{ backgroundImage: `url(${require('@/assets/blog_bg.jpg')})` }"
    ></div>
    <div class="search">
      <el-popover
        placement="bottom"
        title="搜索结果"
        width="50%"
        :visible="visible"
      >
        <template #reference>
          <el-input
            v-model="searchText"
            class="w-50 m-2"
            placeholder="请输入博客关键字"
            :prefix-icon="Search"
            type="search"
            size="large"
            @input="visible = true"
            @blur="visible = false"
          />
        </template>
        <div v-if="searchBlogList.length">
          <div
            class="search-item"
            v-for="data in searchBlogList"
            :key="data._id"
            @click="handleChangePage(data._id)"
          >{{ data.title }}</div>
        </div>
        <div v-else>
          <el-empty
            description="暂无博客"
            :image-size="50"
          />
        </div>
      </el-popover>
    </div>
    <div class="top-blog-list">
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="item in topBlogList"
          :key="item._id"
        >
          <el-card
            shadow="hover"
            :body-style="{ padding: '' }"
            @click="handleChangePage(item._id)"
          >
            <div
              class="image"
              :style="{ backgroundImage: `url(http://localhost:3000${item.cover})` }"
            ></div>
            <div style="padding: 14px">
              <span>{{ item.title }}</span>
              <div class="bottom">
                <time class="time">{{ formatTime(item.updateTime) }}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-tabs
      v-model="tabName"
      class="demo-tabs"
      style="margin: 20px 40px;"
    >
      <el-tab-pane
        :key="item.name"
        v-for="item in tabList"
        :label="item.label"
        :name="item.name"
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <div
              v-for="data in tabBlog[item.name]"
              :key="data._id"
              style="padding: 10px;"
            >
              <el-card
                shadow="hover"
                :body-style="{ padding: '' }"
                @click="handleChangePage(data._id)"
              >
                <div
                  class="tab-image"
                  :style="{ backgroundImage: `url(http://localhost:3000${data.cover})` }"
                  style="margin-right: 20px;"
                ></div>
                <div style="padding: 14px">
                  <span>{{ data.title }}</span>
                  <div class="bottom">
                    <time class="tab-time">{{ formatTime(data.updateTime) }}</time>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-row :span="6">
            <el-timeline style="margin-top: 20px;">
              <el-timeline-item
                v-for="(data, index) in tabBlog[item.name]"
                :key="index"
                :timestamp="formatTime(data.updateTime)"
              >
                {{ data.title }}
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-row>
      </el-tab-pane>

    </el-tabs>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import _ from 'lodash'
import moment from 'moment'
import { useRoute, useRouter } from 'vue-router'
moment.locale('zh-cn')
const searchText = ref('')
const visible = ref(false)
const blogList = ref([])
const tabName = ref(1)
onMounted(() => {
  getBlogList()
})
const getBlogList = async () => {
  const res = await axios.get('/webapi/blog/list')
  if (res.data.ActionType === 'OK') {
    blogList.value = res.data.data
  }
}
const searchBlogList = computed(() => searchText.value ? blogList.value.filter(item => item.title.includes(searchText.value)) : [])
const topBlogList = computed(() => blogList.value.slice(0, 4))
const formatTime = (time) => {
  return moment(time).format('lll')
}
const tabList = [
  { label: '技术文章', name: 1 },
  { label: '热点新闻', name: 2 },
  { label: '日常杂谈', name: 3 }
]
const tabBlog = computed(() => _.groupBy(blogList.value, item => item.category)) 
const router = useRouter()
const handleChangePage = (id)=> {
  router.push(`/blog/${id}`)
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}

.blog-header {
  width: 1920px;
  height: 400px;
  background-size: cover;
}

.search {
  position: absolute;
  top: 300px;
  width: 100%;
  text-align: center;

  .el-input {
    width: 50%;
  }
}

.search-item {
  height: 38px;
  line-height: 38px;

  &:hover {
    background: #ececec;
  }
}

.top-blog-list {
  margin: 20px 40px;

  .image {
    width: 100%;
    height: 250px;
    background-size: cover;
  }

  .time {
    font-size: 13px;
    color: grey;
  }
}

.tab-image {
  width: 150px;
  height: 100px;
  background-size: cover;
  float: left;
}

.tab-time {
  font-size: 13px;
  color: grey;
}
</style>